<template>
  <div :style="styleObj">
    <component :is="value.setup.showtype" :value="value" :style="{width:styleObj.width,height:styleObj.height}" />
  </div>
</template>
<script>
  export default ({
    name: "widgetDecoration",
    components: {},
    props: {
      value: Object,
      ispreview: Boolean
    },
    data() {
      return {
        options: {}, // 样式
      }
    },
    watch: {
      value: {
        handler(val) {
          this.options = val
        },
        deep: true,
      },
    },
    computed: {
      transStyle() {
        return this.objToOne(this.options);
      },
      styleObj() {
        return {
          position: this.ispreview ? "absolute" : "static",
          width: this.transStyle.width + "px",
          height: this.transStyle.height + "px",
          left: this.transStyle.left + "px",
          top: this.transStyle.top + "px",
        }
      }
    },
    mounted() {
      this.options = this.value;
    },
  })
</script>
<style scoped lang="scss">
</style>